import Vue from "vue";
import VueRouter from "vue-router";

// import HomeView from "../views/HomeView.vue";
// import AboutView from "../views/AboutView.vue";
// import DetailView from "../views/DetailView.vue";

Vue.use(VueRouter);

// 创建一个路由表
const routes = [
  {
    // 重定向
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    // 按需引入
    component: () => import("../views/HomeView.vue"),
    // children表示子路由，嵌套路由
    children: [
      {
        path: "/home",
        redirect: "/home/home1",
      },
      {
        path: "home1", // 等同于 path: "/home/home1"
        component: () => import("../views/home/HomeView1.vue"),
      },
      {
        path: "home2",
        component: () => import("../views/home/HomeView2.vue"),
      },
    ],
  },
  {
    path: "/about",
    alias: "/abt",
    component: () => import("../views/AboutView.vue"),
  },
  {
    path: "/mine",
    components: {
      a: () => import("../views/MineView1.vue"),
      b: () => import("../views/MineView2.vue"),
    },
  },
  {
    // 动态路由匹配
    path: "/detail/:id",
    component: () => import("../views/DetailView.vue"),
    name: "detail",
    // 加了之后，在组件里面就可以直接通过props来接受id了
    props: true,
  },
  // 404路由写的位置，只能是路由表的最后面
  // vue的路由默认是排他性路由，react的路由包容性路由
  {
    path: "*",
    // component: () => import("../views/NotFound.vue"),
    redirect: "/home",
  },
];

// 创建路由实例
const router = new VueRouter({
  mode: "history",
  routes,
});

// 暴露
export default router;
